
<template>
  <div id="app" class="login-container">
    <div class="login-form">
      <h2 style="margin-bottom: 30px; color:gray">小默外卖总后台管理系统</h2>
        <el-input type="text" id="username" v-model="user.username" placeholder="请输入账号名称或手机号" required />
        <el-input type="password" id="password" v-model="user.password" placeholder="请输入登录密码" required />

<!--      <div class="captcha-container">-->
<!--        <input v-model="user.captcha" placeholder="请输入校验码" />-->
<!--        <span class="captcha" @click="generateCaptcha">{{ captchaCode }}</span>-->
<!--      </div>-->
      <span style="padding-right: 50%" :style="spanStyle" @click="wangji()">忘记密码?</span>
      <span :style="spanStyle" @click="zhuce()" >立即注册</span>
      <el-button type="primary" @click="login()" class="dl">登录</el-button>
    </div>
  </div>
</template>

<style scoped>

.dl{
  margin-top: 5px;
}
span{
  color:gray;
  font-size: 14px;
}
.el-input{
  margin-bottom: 25px;
}
#app {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background-color: rgba(113,143,229);
}

.login-form {
  background-color: white;
  padding: 20px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  width: 360px;
  height: 450px;
  margin-left: 500px;
  //border-radius: 4px;

  //max-width: 300px;
  //margin: 0 auto;
  //padding: 20px;
  border: 1px solid #ccc;
  border-radius: 15px;
  //text-align: center;
}


label {
  display: block;
  margin-bottom: 5px;
}



button {
  width: 100%;
  padding: 10px;
  background-color: #007bff;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

button:hover {
  background-color: #0056b3;
}



input {
  display: block;
  width: 100%;
  margin-bottom: 10px;
  padding: 10px;
  box-sizing: border-box;
}

.captcha-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.captcha {
  cursor: pointer;
  font-size: 16px;
  color: blue;
  user-select: none;
}

button {
  display: block;
  width: 100%;
  padding: 10px;
  background-color: #007bff;
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}

button:hover {
  background-color: #0056b3;
}


</style>

<script>
export default {
  data() {
    return {
      spanStyle: {
        cursor: 'pointer' //鼠标经过小手标志
      },

      user:{},
      captchaCode: '',
    };
  },
  methods: {
    wangji(){
      location.href='#/wangji'
    },
    zhuce(){
      location.href='#/zhuce'
    },
    generateCaptcha() {
      const chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
      let code = '';
      for (let i = 0; i < 4; i++) {
        code += chars.charAt(Math.floor(Math.random() * chars.length));
      }
      this.captchaCode = code;
    },
    login() {
      if (this.user.username==null || this.user.username==''){
        this.$message.error('请填写账号名称');
        return;
      }
      if (this.user.password==null || this.user.password==''){
        this.$message.error('请填写登录密码');
        return;
      }
      // if (this.user.captcha==null || this.user.captcha==''){
      //   this.$message.error('请填写校验码');
      //   return;
      // }else{
      //   if (this.user.captcha!=this.captchaCode){
      //     this.$message.error('校验码不正确');
      //     this.generateCaptcha(); // 重新生成校验码
      //     return;
      //   }
      // }
      this.axios.post(`http://localhost:8000/xm-user-login/xm-login/login`,this.user).then(res => {
        if (res.data.code === 200) {
          this.$message.success("登录成功！欢迎您："+res.data.data.username);
          sessionStorage.setItem('userDB', JSON.stringify(res.data.data));
          location.href = '#/daohang';
        } else {
          this.$message.error(res.data.data);
        }
      })
    },
  },
  created() {
    // this.generateCaptcha();
  }
};
</script>
